<template>
  <div>

    <el-container>
      <el-header>
        <h1><font color="#ffefd5">农产品溯源管理系统</font></h1>
        <div class="toggle-container">
          <div class="weather-form" style="width: 400px; height: 86px; position: absolute; right: 0; top: 0; z-index: 999;" v-if="showWeatherForm">
            <el-card class="weather-card">
              <h3>天气信息</h3>
              <el-form label-width="100px">
                <el-form-item label="城市">
                  <el-input v-model="locations" placeholder="输入地点"></el-input><el-button type="primary" @click="getWeatherMessage">查询</el-button>
                </el-form-item>

                <el-form-item label="当前城市">
                  <el-tag>{{ cityarea }}</el-tag>
                </el-form-item>

                <el-form-item label="温度">
                  <el-tag>{{ temperature }}°C</el-tag>
                </el-form-item>
                <el-form-item label="天气状况">
                  <i :class="weatherIcon" style="font-size: 24px"></i>
                  <span>{{ weatherCondition }}</span>
                </el-form-item>
                <el-form-item label="湿度">
                  <el-progress :percentage="humidity" status="success"></el-progress>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#314151FF"
              text-color="#fff"
              active-text-color="#ffd04b"
            router>
            <el-submenu :index="m.id" v-for="m in menus" v-bind:key="m.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{m.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="s.path" v-for="s in m.children" v-bind:key="s.id">{{s.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-main>

          <router-view/>
          <div style="width: 1000px">
            <el-button style="margin-left: 1000px" @click="getNocusAddress">数据中心</el-button>
            <button style="position: absolute; top: 127px; left: 10px;" @click="toggleWeatherForm">
              <i :class="showWeatherForm? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
            </button>
          </div>
        </el-main>
      </el-container>
    </el-container>

  </div>

</template>



<script>
export default {
  name: "IndexView",
  data() {
    return {
      menus:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},

      showWeatherForm: false,
      locations: '',
      temperature: '',
      weatherCondition: '',
      humidity: 0,
      weatherIcon: '',
      cityarea:'',

    }
  }, methods: {
    async getWeatherMessage() {
      try {
        const res = await this.axios.get("system/weather/getWeather", { params: { locations: this.locations } });
        console.log("天气信息 温度："+res.data.temperature)
        console.log("天气信息 湿度："+res.data.humidity)
        console.log("天气信息 天气："+res.data.info)
        console.log("天气信息 城市："+res.data.city)

        this.temperature = res.data.temperature;
        this.cityarea = res.data.city;
        this.weatherCondition = res.data.info;
        this.humidity = +res.data.humidity;
        const weatherCode = this.getWeatherCode(res.data.info);
        this.weatherIcon = this.getWeatherIcon(weatherCode);
      } catch (error) {
        console.error('Error fetching weather data:', error);
      }
    },
    // 根据天气状况获取天气代码
    getWeatherCode(weatherCondition) {
      if (weatherCondition.includes('晴')) {
        return 'sunny';
      } else if (weatherCondition.includes('雨')) {
        return 'rainy';
      } else if (weatherCondition.includes('雪')) {
        return 'snowy';
      } else if (weatherCondition.includes('多云')) {
        return 'moreskey';
      }
      else {
        return 'cloudy';
      }
    },
    // 根据天气代码获取对应的图标名称
    getWeatherIcon(weatherCode) {
      switch (weatherCode) {
        case 'sunny':
          return 'el-icon-sunny';
        case 'moreskey':
          return 'el-icon-partly-cloudy';
        case 'rainy':
          return 'el-icon-cloud-rain';
        case 'snowy':
          return 'el-icon-snow';
        default:
          return 'el-icon-cloud';
      }
    },
    toggleWeatherForm() {
      this.showWeatherForm =!this.showWeatherForm;
      this.getWeatherMessage()
    },


    getNocusAddress() {
      this.$router.push("/data")
    },
      list(){
        this.axios.post("/system/menu/list").then(res=>{
          this.menus=res.data.data;
        })
      }
  }, created() {
      this.list();
      this.getWeatherMessage();
  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: #3e8ebd;
  color: #333;
  text-align: center;
  line-height: 30px;
}

.el-aside {
  background-color: #314151;
  color: #2b3a47;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 10px;
}
.toggle-container button {
  cursor: pointer;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>